<template>
	<div>
		<div class="box">
			<div class="rule-box" :style="`width:${parentTitleWidth + titleWidth + width}px;`">
				<rule :style="`margin-left:${titleWidth + parentTitleWidth}px;width:${width}px;`" ref="rule" :width="width"
					:createTime="createTime" :hour="hour" :titleWidth="titleWidth"></rule>
			</div>
			<div class="list-box">
				<div class="for-box" v-for="(val, i) in list">
					<div class="parent-title" :style="`width:${parentTitleWidth}px;`">
						{{ val.inflow_type }}
					</div>
					<div class="box-right" :style="`width:${titleWidth + width}px;`">
						<div v-for="(item, idx) in val.medicineList" :key="idx">
							<drag @stopTip="stopTip" @setTip="tipMove" ref="drag" @updateDataList="updateDataList" @editAll="editAll"
								@editItem="editItem" :childClIdx="[i, idx]" :list.sync="item" :itemHeight="itemHeight" :width="width"
								:titleWidth="titleWidth" :createTime="createTime" :hour="hour"></drag>
						</div>
					</div>
				</div>
			</div>
			<div class="canvas-box" :style="`height:${canvasHeight}px;width:${parentTitleWidth + titleWidth + width}px;`">
				<!-- canvas左侧 -->
				<div class="can-left" :style="`height:${canvasHeight}px;width:${parentTitleWidth + titleWidth}px;`">
					1
				</div>
				<!-- canvas 右侧折线图 -->
				<div class="can-right">
					<charts ref="charts" @updateDataList="updateDataList" :itemHeight="itemHeight" :width="width"
						:canvasHeight="canvasHeight" :titleWidth="titleWidth" :parentTitleWidth="parentTitleWidth"
						:createTime="createTime" :hour="hour"></charts>
				</div>
			</div>

		</div>
		<div class="tip" v-show="tipShow" :style="{ top: tipValue.tipTop + 'px', left: tipValue.tipLeft + 'px' }">
			<div v-if="tipValue.startTime">开始时间:{{ tipValue.startTime }}</div>
			<div v-if="tipValue.endTime">结束时间:{{ tipValue.endTime }}</div>
		</div>
		<drag-edit-item :visible.sync="dragEditItemShow" v-if="dragEditItemShow" ref="drag-edit-item" />
		<drag-edit :visible.sync="dragEditShow" v-if="dragEditShow" ref="drag-edit" />
	</div>
</template>

<script>
import drag from './component/drag.vue'
import rule from './component/rule.vue'
import charts from './component/charts.vue'
import dragEditItem from './component/drag-edit-item.vue'
import dragEdit from './component/drag-edit.vue'

export default {
	data() {
		return {
			// ````````````````````页面配置项
			hour: 18, //小时数
			createTime: '2023-04-08 11:10:05', // 起始时间
			parentTitleWidth: 25, //主标题宽度
			itemHeight: 20, //字列表单个列表的高度
			titleWidth: 150, //子标题宽度
			width: 1000, //子 进度条 部分宽度  // canvas宽
			canvasHeight: 700, //canvas高
			tipShow: false, //是否显示浮窗
			dragEditItemShow: false, //编辑单条数据
			dragEditShow: false, //编辑多条数据
			// `````````````````````````
			tipValue: {
				tipTop: -1000, //浮窗浮动的位置
				tipLeft: -1000, //浮窗浮动的位置
				startTime: '',
				endTime: ''
			},
			watch: {
				list() {
					// console.log(this.list, 88888888);
				},
			},
			list: [{
				inflow_type: '麻醉药',
				medicineList: [
					{
						name: '麻醉1',
						injectionList: [
							{
								mode: '单次',
								name: '单次',
								startTime: '2023-04-08 13:20:05',
							},
							{
								name: '111',
								"mode": "持续",
								startTime: '2023-04-08 13:00:00',
								endTime: '2023-04-08 14:00:00'
							},],
					},
					{
						name: '麻醉2',
					},
					{
						"name": "强效麻醉药",
						"injectionList": [{
							name: '持续多个',
							"mode": "持续",
							startTime: "2023-04-08 15:25:00",
							endTime: "2023-04-08 18:45:00",
							"rateList": [{
								"speed": "123",
								"startTime": "2023-04-08 15:45:00"
							},
							{
								"speed": "234",
								"startTime": "2023-04-08 17:55:00"
							}
							]
						}]
					}
				]
			},
			{
				inflow_type: '酒精',
				medicineList: [{
					name: '1',
					injectionList: [{
						name: '1%',
						"mode": "持续",
						startTime: '2023-04-08 13:00:00',
						endTime: '2023-04-08 14:00:00'
					}]
				},
				{
					name: '2',
					startTime: '2023-04-08 14:00:00',
					endTime: '2023-04-08 14:00:00'
				},
				{
					name: '3',
					injectionList: [{
						name: '11%',
						"mode": "持续",
						startTime: '2023-04-08 12:10:05',
						endTime: '2023-04-08 12:40:05'
					},
					{
						mode: '单次',
						name: '单次',
						startTime: '2023-04-08 11:20:05',
					},
					{
						mode: '单次',
						name: '单次',
						startTime: '2023-04-08 12:20:05',
					}
					]
				}
				]
			},
			{
				inflow_type: '33',
				medicineList: [{
					name: '单次',
					injectionList: [{
						"mode": "单次",
						startTime: '2023-04-08 13:00:00',
					}]
				},
				{
					name: '0.66',
				},
				{
					name: '33',
					injectionList: [{
						"mode": "持续",
						startTime: '2023-04-07 12:10:05',
						endTime: '2023-04-08 12:40:05'
					},
					{
						name: '1%',
						"mode": "持续",
						startTime: '2023-04-08 11:20:05',
						endTime: '2023-04-08 13:00:05'
					}
					]
				}
				]
			}
			]
		}
	},
	components: {
		drag,
		rule,
		charts,
		dragEditItem,
		dragEdit
	},
	mounted() {
		document.addEventListener('visibilitychange', () => {
			this.tipShow = false
		});
	},

	methods: {
		// 编辑全部
		editAll() {
			this.dragEditShow = true
		},
		// 编辑单条
		editItem() {
			this.dragEditItemShow = true
		},
		// 关闭弹窗
		stopTip() {
			this.listSort()
			this.tipShow = false
			this.$forceUpdate();
		},
		// 设置浮标位置
		tipMove(e) {
			let tipLeft = e.x + 20
			let tipTop = e.y + 20
			if (tipLeft < 0) {
				tipLeft = 0
			} else if (tipLeft > window.innerWidth - 100) {
				tipLeft = window.innerWidth - 100
			}
			if (tipTop < 0) {
				tipTop = 0
			} else if (tipTop > window.innerHeight - 100) {
				tipTop = window.innerHeight - 100
			}
			this.tipValue.tipLeft = tipLeft
			this.tipValue.tipTop = tipTop
			this.tipValue.startTime = e.startTime
			this.tipValue.endTime = e.endTime
			this.tipShow = true //关闭弹窗
			this.$forceUpdate();
		},
		// 更新数据
		updateDataList(idx, val) {
			try {
				if (
					this.list[idx[0]] &&
					this.list[idx[0]].medicineList &&
					this.list[idx[0]].medicineList[idx[1]] &&
					this.list[idx[0]].medicineList[idx[1]].injectionList &&
					this.list[idx[0]].medicineList[idx[1]].injectionList.length
				) {
					this.list[idx[0]].medicineList[idx[1]] = val
					// console.log(idx, '当前更改的位置');
				}
			} catch { }
		},
		// 排序
		listSort() {
			function compare2(obj1, obj2) {
				let val1
				if (obj1.injectionList && obj1.injectionList[0] && obj1.injectionList[0].left) {
					val1 = obj1.injectionList[0].left
				} else {
					val1 = 99999
				}
				let val2
				if (obj2.injectionList && obj2.injectionList[0] && obj2.injectionList[0].left) {
					val2 = obj2.injectionList[0].left
				} else {
					val2 = 99999
				}
				if (val1 < val2) {
					return -1;
				} else if (val1 > val2) {
					return 1;
				} else {
					return 0;
				}
			}
			// 排父级
			this.list.forEach((ele, idx) => {
				this.list[idx].medicineList.sort(compare2)
			})
		},
	}
}
</script>

<style scoped lang="scss">
.box {
	margin: 0 auto;
}

.rule-box {
	border: 1px solid #31C2AF;
}

.canvas-box {
	display: flex;
	flex-wrap: nowrap;
	border-left: #31C2AF 1px solid;
	border-bottom: #31C2AF 1px solid;
}

.for-box {
	border-left: 1px solid #31C2AF;
	display: flex;
	flex-wrap: nowrap;

	.parent-title {
		border-right: 1px solid #31C2AF;
		border-bottom: 1px solid #31C2AF;
		writing-mode: vertical-lr;
		text-align: center;
	}
}

.tip {
	text-align: center;
	width: 280px;
	position: fixed;
	background-color: rgba(225, 225, 255, 0.9);
	padding: 5px;
	border-radius: 5px;
	z-index: 9999;
}

::-webkit-scrollbar {
	width: 1px;
}

::-webkit-scrollbar-thumb {
	background: rgba(49, 194, 179, 0.9);
}
</style>